<!-- directive:title 多层表格hover集体高亮效果规范写法 -->
<!-- directive:breadcrumb 多层表格hover集体高亮效果规范写法 -->
<div class="yxt14 panel-body">
    <div class="yxt14breadcrumb">
        <a href="javascript:;">当前位置 : 首页</a><a href="javascript:;">第一级</a><a href="javascript:;">第二集</a><a href="javascript:;">第三季</a>
    </div>
    <div class="container-fluid">
        <h6><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table">MDN</a>提到:在table里可以有0个或多个tbody</h6>
        <div class="panel">
            <div class="table-responsive main-table-yx">
                <table class="table">
                    <thead>
                        <tr>
                            <th style="width:10%;text-align:left;"><span ng-click="bgactive('aa')">编号<i class="pull pfi " ng-class="{0:'sort',1:'asc',2:'desc'}[bgact.aa]"></i></span></th>
                            <th style="width:10%;text-align:left;"><span ng-click="bgactive('bb')">物品名称<i class="pull pfi " ng-class="{0:'sort',1:'asc',2:'desc'}[bgact.bb]"></i></span></th>
                            <th style="width:10%;text-align:left;"><span ng-click="bgactive('cc')">购买价格<i class="pull pfi " ng-class="{0:'sort',1:'asc',2:'desc'}[bgact.cc]"></i></span></th>
                            <th style="width:10%;text-align:left;"><span ng-click="bgactive('dd')">物品类型<i class="pull pfi " ng-class="{0:'sort',1:'asc',2:'desc'}[bgact.dd]"></i></span></th>
                            <th style="width:10%;text-align:left;"><span ng-click="bgactive('ff')">通俗名称<i class="pull pfi " ng-class="{0:'sort',1:'asc',2:'desc'}[bgact.ff]"></i></span></th>
                            <th style="width:10%;text-align:left;"><span>使用距离</span></th>
                            <th style="width:10%;text-align:left;"><span>操作人</span></th>
                            <th style="width:20%;text-align:left;"><span>录入时间</span></th>
                            <th style="width:10%;text-align:left;"><span>操作</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-if="table_data.length==0 && tableDataOk"><td colspan=99><center>无数据</center></td></tr>
                        <tr ng-if="!tableDataOk" class="imloading"><td colspan=99><center>数据加载中</center><div><div class="sk-spinner sk-spinner-wave"> <div class="sk-rect1"></div> <div class="sk-rect2"></div> <div class="sk-rect3"></div> <div class="sk-rect4"></div> <div class="sk-rect5"></div> </div><div></td></tr>
                    </tbody>
                    <tbody ng-repeat="row in table_data">
                        <tr>
                            <td style="text-align:left;"><a class="btn-link" href="#/rpt/b2">{{ row.aa }}</a></td>
                            <td style="text-align:left;"><span>{{ row.bb }}</span></td>
                            <td style="text-align:left;"><span>{{ row.cc }}</span></td>
                            <td style="text-align:left;"><span>{{ row.dd }}</span></td>
                            <td style="text-align:left;"><span>{{ row.ff }}</span></td>
                            <td style="text-align:left;"><span>{{ row.hh }}</span></td>
                            <td style="text-align:left;"><span>{{ row.oo }}</span></td>
                            <td style="text-align:left;"><span>{{ row.nn }}</span></td>
                            <td style="text-align:left;"><a class="main-table-link" href="javascript:void(0)">修改</a></td>
                        </tr>
                        <tr class="extraTd">
                            <td style="text-align:left;" colspan=2><span><b>数据来源</b>:{{ row.mm }}</span></td>
                            <td style="text-align:left;" colspan=2><span><b>备注</b>:{{ row.ii }}</span></td>
                            <td style="text-align:left;" colspan=5><span><b>物品效果</b>:{{ row.jj }}</span></td>
                        </tr>
                        <tr class="extraTd">
                            <td style="text-align:left;" colspan=2><a class="btn-link" href="{{ row.ll }}">点击访问数据来源</a></td>
                            <td style="text-align:left;" colspan=2><span><b>销售地点</b>:{{ row.gg }}</span></td>
                            <td style="text-align:left;" colspan=5><span><b>特殊技能</b>:{{ row.ee }}</span></td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <th style="text-align:left;">汇总</th>
                            <th style="text-align:left;">{{ sumdata.TerminalsSum }}</th>
                            <th style="text-align:left;">{{ sumdata.BootCountSum }}</th>
                            <th style="text-align:left;">{{ sumdata.LoadingSum }}</th>
                            <th style="text-align:left;">{{ sumdata.ClickSum }}</th>
                            <th style="text-align:left;">{{ sumdata.ClickSum/sumdata.LoadingSum }}</th>
                            <th style="text-align:left;">{{ sumdata.DisbSum }}</th>
                            <th style="text-align:left;">{{ sumdata.LoadingSum }}</th>
                            <th style="text-align:left;">{{ sumdata.ClickSum }}</th>
                        </tr>
                    </tbody>
                </table>
                <div style="clear:both"></div>
                <div class="main-table-info">
                    <div class="main-table-info-msg">
                    <h6>{{ showMessage() }}</h6>
                    </div>
                    <div class="pull-right">
                        <uib-pagination total-items="rowcount" ng-model="page_index" max-size="10"
                        first-text="第一页" items-per-page="pagesize" ng-change="pageChanged()"
                        previous-text="上一页" next-text="下一页" last-text="最后页"
                        boundary-links="true" boundary-link-numbers="true"></uib-pagination>
                    </div>
                </div>
            </div>
        </div>
        <style type='text/css' ui-bs>
            .table.haha tbody *{color:#eee !important;}
            .table.haha tbody tr.hehe *{color:#333 !important;}
        </style>
        <script type="text/javascript" ui-bs>
            setTimeout(function(){
                $(".table").each(function(){
                    var table = $(this);
                    table.find("tbody").each(function(){
                        $(this).find("tr").each(function(i){
                            $(this).attr("hoverme",i);
                        });
                    });
                    table.on("mouseover","tr",function(){
                        var index = $(this).attr("hoverme");
                        table.find(".hehe").removeClass("hehe");
                        table.find("[hoverme="+index+"]").addClass("hehe");
                    });
                    table.hover(
                        function(){ $(this).addClass("haha") },
                        function(){ $(this).removeClass("haha") }
                    );
                });
            },2e3)
        </script>
    </div>
</div>